<template>
	<view class="content">
		<!-- 自定义头部 -->
		<Header @getNavIndex="getNavIndex"></Header>
		<!-- 导航页下的内容 -->
		<!-- 邀请好友 -->
		<view class="invite-friends" v-if="navIndex === '1'">
			<!-- 底部弹窗 -->
			<uni-popup ref="popup" type="bottom">
				<view class="share-pop">
					<view class="share-item" v-for="(item, index) in shareList" :key="item.name" @click="share(item)">
						<image :src="item.img" mode="widthFix"></image>
						<text>{{ item.name }}</text>
					</view>
				</view>
			</uni-popup>
			<!-- 文字介绍 -->
			<view class="main">
				<view class="main-title">我的邀请码</view>
				<view>{{token}}</view>
				<view class="main-code">{{ code }}</view>
				<view class="main-copy" @click="copy">复制</view>
				<view class="main-hint">已成功邀请2位好友</view>
				<!-- 保存图片 -->
				<!-- <view @click="saveImg">保存图片</view> -->
				<!-- 二维码 -->
				<!-- <view class="qrcode" v-if="!tempPath">
					<ayQrcode
						@saveImage="saveImage"
						ref="qrcode"
						qrcode_id="qrcode_id"
						:modal="modal_qr"
						:url="url"
						@hideQrcode="hideQrcode"
						:height="211"
						:width="211"
						:is_themeImg="true"
						:themeImg="qrcodeImg"
						:h_w_img="46"
					/>
				</view> -->
				<!-- <view class="qrcode" v-if="tempPath">
					<image class="code-img" :src="tempPath" mode=""></image>
					<image src="../../static/logo.png" class="code-center" mode=""></image>
				</view> -->
				<view class="qrcode">
					<image class="code-img" src="../../static/qr_code.png" mode=""></image>
					<!-- <image src="../../static/logo.png" class="code-center" mode=""></image> -->
				</view>

				<!-- 邀请按钮 -->
				<view class="invite-btn" @click="invite">立即邀请</view>
			</view>
		</view>
		<!-- 邀请记录 -->
		<view class="invite-history" v-if="navIndex === '2'">
			<view class="history">
				<view class="table-header">
					<view class="header-item">注册账号</view>
					<view class="header-item">注册时间</view>
					<view class="header-item">获得返利</view>
				</view>
				<view class="history-list">
					<view class="history-item" v-for="(item, index) in historyList" :key="index">
						<view class="account ellipsis">{{ item.accountNo }}</view>
						<view class="create-time ellipsis">{{ item.registerTime | parseTime('{y} {M}-{d} {h}:{m}') }}</view>
						<view class="amount ellipsis">{{ item.returnMoney || '' }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 补绑邀请码 -->
		<view class="invite-code" v-if="navIndex === '3'">
			<view class="main">
				<view class="header"></view>
				<view class="content">
					<view class="title">请输入要绑定的邀请码</view>
					<!-- <view class="code">3547920</view> -->
					<input v-if="isShow" class="code" :value="queryInfo.code" @input="inputValue" maxlength="18" @blur="blur" />
					<input v-else class="code" type="text" @focus="focus" placeholder="请输入邀请码" />
					<view class="hint">下载APP后再注册页面输入，如已下载请忽略</view>
					<view class="btn" @click="bindCode()">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Header from '@/components/Header.vue';
import ayQrcode from '@/components/ay-qrcode/ay-qrcode.vue';
// const MobileDetect = require('mobile-detect');
export default {
	components: {
		Header,
		ayQrcode
	},
	data() {
		return {
			// 邀请码
			code: '',
			// 二维码临时保存地址
			tempPath: '',
			// 分享渠道列表
			shareList: [
				{ img: '../../static/weixin.png', name: '微信好友' },
				{ img: '../../static/pyq.png', name: '朋友圈' },
				{ img: '../../static/weibo.png', name: '微博' },
				{ img: '../../static/qq.png', name: 'QQ' },
				{ img: '../../static/q-zone.png', name: 'QQ空间' },
				{ img: '../../static/copy.png', name: '复制链接' }
			],
			// 记录列表
			historyList: [],
			title: 'Hello',
			navIndex: '1',
			//二维码相关参数
			// 中间二维码图片的宽高
			imgWh: 5,
			// 是否显示二维码中间的图片
			isThemeImg: true,
			modal_qr: false,
			// 二维码中间的图片
			qrcodeImg: '../../static/logo.png',
			url: 'http://192.168.1.159:8081/#/download/download', // 要生成的二维码值
			isShow: false,
			// 查询历史记录
			queryInfo: {
				inviteCode: ''
			},
			token: ''
		};
	},
	onShow() {
		// #ifdef H5
		let params = this.getRequestParams();
		this.token = params['token'];
		
		console.log(this.token,'token')
		// #endif
		if (!this.queryInfo.inviteCode) {
			this.getCode();
		}
	},
	onLoad() {
		this.navIndex = uni.getStorageSync('NAV_INDEX') || '1';
		if (this.navIndex === '1') {
			// this.showQrcode(); //一加载生成二维码
		} else if (this.navIndex === '2') {
			this.getHistoryList();
		}
	},
	methods: {
		// 获取参数
		getRequestParams() {
			let url = location.href;
			let requestParams = {};
			if (url.indexOf('?') !== -1) {
				let str = url.substr(url.indexOf('?') + 1); //截取?后面的内容作为字符串
				console.log(str, '?后面的内容');
				let strs = str.split('&'); //将字符串内容以&分隔为一个数组
				console.log(strs, '以&切割的数组');
				for (let i = 0; i < strs.length; i++) {
					requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
					// 将数组元素中'='左边的内容作为对象的属性名，'='右边的内容作为对象对应属性的属性值
				}
			}
			// console.log(theRequest, '处理后的对象');
			return requestParams;
		},

		// 下载图片
		saveImg() {
			var oA = document.createElement('a');
			oA.download = ''; // 设置下载的文件名，默认是'下载'
			oA.href = this.tempPath;
			document.body.appendChild(oA);
			oA.click();
			oA.remove(); // 下载之后把创建的元素删除
		},

		// 复制邀请码
		copy() {
			var that = this;
			uni.setClipboardData({
				data: that.code,
				success: function(res) {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				},
				fail: function(res) {
					uni.showToast({
						title: '复制失败',
						icon: 'none'
					});
				}
			});
		},
		// 获取首页二维码
		async getCode() {
			const res = await this.$https('/my_center/get_invite_code');
			if (res.resultCode !== '200')
				return uni.showToast({
					title: '获取邀请码失败,请刷新重试',
					icon: 'none'
				});
			this.code = res.data;
		},
		// 获取邀请记录
		async getHistoryList() {
			const res = await this.$https('/my_center/record', 'POST');
			console.log(res);
			if (res.resultCode !== '200')
				return uni.showToast({
					title: '获取邀请码失败,请刷新重试',
					icon: 'none'
				});
			this.historyList = res.data;
		},
		saveImage(path) {
			this.tempPath = path;
		},
		// 分享
		share(item) {
			const timer = setTimeout(() => {
				this.$refs.popup.close();
				clearTimeout(timer);
			}, 1000);
		},
		blur() {
			if (this.queryInfo.inviteCode) return;
			setTimeout(() => {
				this.$nextTick(function() {
					this.isShow = false;
				});
			}, 200);
		},
		// focus
		focus() {
			this.isShow = true;
		},
		// 输入框绑定事件
		inputValue(e) {
			this.queryInfo.inviteCode = e.detail.value;
		},
		// 绑定邀请码
		async bindCode() {
			uni.showLoading({
				title: '绑定中...'
			});
			uni.navigateTo({
				url: '../friend/friend'
			});
			const res = await this.$https('/my_center/bind', this.queryInfo);
			console.log(res);
			if (res.resultCode !== '200') {
				return uni.showToast({
					title: res.resultCodeMsg,
					icon: 'none'
				});
				uni.hideLoading();
			}
			uni.hideLoading();
			uni.showToast({
				title: '绑定成功',
				icon: 'none'
			});
			this.historyList = res.data;
		},
		// 邀请好友
		invite() {
			uni.showToast({
				title: '立即邀请',
				icon: 'none'
			});
			// 打开弹窗
			let params = {
				Title: '足球世界',
				Text: '邀请好友参与活动有机会赢取豪华大礼',
				Url: 'http://192.168.1.159:8081/#/pages/friend/friend'
			};
			params = JSON.stringify(params);
			window.football.handlerEvents(10002, params);
			// this.$refs.popup.open();
		},
		// 邀请
		codeSend() {
			uni.navigateTo({
				url: '/pages/share/share'
			});
		},
		// 获取当前导航的索引
		getNavIndex(id) {
			console.log('id', id);
			this.navIndex = id;
			switch (id) {
				case '1':
					// if (!this.tempPath) {
					// 	this.showQrcode(); //一加载生成二维码
					// }
					break;
				case '2':
					this.getHistoryList();
					break;
				case '3':
					break;
				default:
					break;
			}
		},
		// 展示二维码
		showQrcode() {
			console.log('调用展示二维码');
			let _this = this;
			this.modal_qr = true;
			setTimeout(function() {
				_this.$refs.qrcode.crtQrCode();
				_this.$refs.qrcode.saveImage();
			}, 50);
		},
		//传入组件的方法
		hideQrcode() {
			this.modal_qr = false;
		}
	}
};
</script>

<style lang="less">
.content {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 750rpx;
	// width: 750rpx;
	background: rgba(254, 15, 57, 1);
	padding-bottom: 30rpx;
	box-sizing: border-box;
}

// 邀请好友
.invite-friends {
	width: 750rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
	background: url(../../static/invite-bg.png) no-repeat top center;
	background-size: 750rpx 396rpx;

	/* 标题 */
	.title-wrap {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 400rpx;
		margin-bottom: 25rpx;
		.point-small {
			width: 9rpx;
			height: 9rpx;
			border-radius: 50%;
			background: #fff;
		}
		.point-big {
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			background: #fff;
		}
		.title {
			// margin: 0 22.64rpx;
			font-size: 42rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}
	// 底部弹窗
	.share-pop {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		width: 750rpx;
		height: 441rpx;
		background: #ffffff;

		padding: 42rpx 75rpx 57rpx 75rpx;
		box-sizing: border-box;
		.share-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 24.31rpx;
			image {
				width: 97rpx;
				height: 97rpx;
				margin-bottom: 24rpx;
			}
			text {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #909090;
			}
		}
		.share-item:not(:nth-child(3n)) {
			margin-right: 152rpx;
		}
		.share-item:nth-child(-n + 3) {
			margin-bottom: 59rpx;
		}
	}

	.main {
		margin-top: 265rpx;
		width: 701rpx;
		height: 1117rpx;
		// background: #ffffff;
		border-radius: 14rpx;
		padding: 24rpx;
		box-sizing: border-box;
		position: relative;
		background: url(../../static/homg-bg.png) no-repeat center center;
		background-size: contain;

		// 邀请按钮
		.invite-btn {
			// margin-top: 36rpx;
			// margin-bottom: 43rpx;
			margin: 36rpx auto 0 auto;
			width: 524rpx;
			height: 104rpx;
			line-height: 104rpx;
			text-align: center;
			background: #f82d28;
			box-shadow: 0px 1rpx 6rpx 0px rgba(248, 45, 40, 0.89);
			border-radius: 10rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
		.main-title {
			width: 100%;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #222222;
			margin-top: 50rpx;
		}
		// 二维码
		.main-code {
			width: 100%;
			text-align: center;
			font-size: 77rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #e44336;
			margin-bottom: 38rpx;
		}
		.main-copy {
			width: 137rpx;
			height: 57rpx;
			line-height: 57rpx;
			text-align: center;
			background: #e44336;
			border-radius: 29rpx;
			font-size: 29rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
			margin: 0 auto;
		}
		.main-hint {
			margin-bottom: 77rpx;
			margin-top: 45rpx;
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #222222;
		}
		.qrcode {
			margin: 10rpx;
			position: relative;
			display: flex;
			justify-content: center;
			.code-img {
				width: 421rpx;
				height: 421rpx;
			}
			.code-center {
				position: absolute;
				top: 50%;
				width: 92rpx;
				height: 92rpx;
				transform: translateY(-50%);
			}
			// justify-content: center;
		}
	}
}
// 邀请记录
.invite-history {
	margin-top: 120rpx;
	width: 700rpx;
	height: 917rpx;
	background: #ffffff;
	border-radius: 14rpx;
	.table-header {
		height: 83rpx;
		background: rgba(228, 67, 54, 0.08);
		border-radius: 14rpx 14rpx 0 0;
		display: flex;
		align-items: center;
		.header-item {
			flex: 1;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #222222;
			text-align: center;
		}
	}
	.history-list {
		overflow: hidden;
		overflow-y: scroll;
		height: 834rpx;
		padding: 0 34rpx 0 37rpx;
		box-sizing: border-box;
		.history-item {
			display: flex;
			align-items: center;
			padding: 32rpx 0;
			border-bottom: 1rpx solid #e9e9e9;
			.account {
				width: 172rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;
				margin-right: 35rpx;
			}
			.create-time {
				width: 230rpx;
				margin-right: 106rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;
			}
			.amount {
				width: 72rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;
			}
		}
	}
}

// 补绑邀请码
.invite-code {
	width: 100%;
	// height: 100vh;
	background: url(../../static/invite-bg.png) no-repeat top center;
	background-size: 100% 396rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	.main {
		margin-top: 310rpx;
		width: 701rpx;
		height: 697rpx;
		background: #ffffff;
		border-radius: 14rpx;
		overflow: hidden;
		.header {
			height: 88rpx;
			// border-bottom: 1rpx solid rgba(251, 83, 58, 1);
		}
		.content {
			margin-top: 20rpx;
			height: 100%;
			background: #ffffff;
			.title {
				font-size: 33rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #222222;
				margin-bottom: 68rpx;
			}
			.code {
				width: 417rpx;
				height: 101rpx;
				line-height: 101rpx;
				text-align: center;
				background: #f4f4f4;
				border: 1rpx solid #d4d4d4;
				border-radius: 50rpx;
				font-size: 38rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #e44336;
				margin-bottom: 76rpx;
			}
			.hint {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #b4b4b4;
				margin-bottom: 94rpx;
			}
			.btn {
				width: 524rpx;
				height: 104rpx;
				line-height: 104rpx;
				text-align: center;
				background: #f82d28;
				box-shadow: 0px 1rpx 6rpx 0px rgba(248, 45, 40, 0.89);
				border-radius: 10rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
		}
	}
}
</style>
